<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="app"></div>
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.cjs.min.js"></script>-->
  <script type="text/javascript">
    // 社区参考链接: https://mp.weixin.qq.com/s/oUODA7ooyz-CwBTvLNF-VQ
    // 官方参考链接: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver

    // TTFB：Time To First Byte，首字节时间
    // FP：First Paint，首次绘制，绘制Body
    // FCP：First Contentful Paint，首次有内容的绘制，第一个dom元素绘制完成
    // FMP：First Meaningful Paint，首次有意义的绘制
    // TTI：Time To Interactive，可交互时间，整个内容渲染完成

    // FP仅有一个div根节点
    // FCP包含页面的基本框架，但没有数据内容
    // FMP包含页面的所有元素及数据
    // const observer = new PerformanceObserver((list) => {
    //   for(const entry of list.getEntries()){
    //     console.groupCollapsed(entry.name);
    //     console.log(entry.entryType);
    //     console.log(entry.startTime);
    //     console.log(entry.duration);
    //     console.groupEnd(entry.name);
    //   }
    // })
    // observer.observe({entryTypes:['longtask','frame','navigation','resource','mark','measure','paint']});

    // 使用 PerformanceObserver 监听 fcp
    // if (!!PerformanceObserver){ // 判断浏览器有没有此方法
    //   try {
    //     const type = 'paint';
    //     if ((PerformanceObserver.supportedEntryTypes || []).includes(type)) {
    //       const observer = new PerformanceObserver((entryList)=>{
    //         for(const entry of entryList.getEntriesByName('first-contentful-paint')){
    //           const { startTime,duration } = entry;
    //           console.log('[assets-load-monitor] PerformanceObserver fcp:', startTime+duration);
    //
    //           // 上报startTime操作
    //         }
    //       });
    //       observer.observe({
    //         entryTypes: [type],
    //       });
    //       return;
    //     }
    //   } catch (e) {
    //     // ios 不支持这种entryTypes，会报错 https://caniuse.com/?search=PerformancePaintTiming
    //     console.warn('[assets-load-monitor] PerformanceObserver error:', (e || {}).message ? e.message : e);
    //   }
    // }
  </script>
  <noscript>
    不好意思，你的浏览器不支持或禁用了 JavaScript，请更换浏览器或启用 JavaScript
  </noscript>
</body>
</html>
